import { ComponentWithStore } from 'mobx-miniprogram-bindings'
import { userStore } from '@/store/userStore'
import {
  reqCartList,
  reqUpdateChecked,
  reqCheckAllCart,
  reqAddCart,
  reqDelCart
} from '@/api/cart'
import { debounce } from '@/utils/debounce'
// 导入computed
const computedBehavior = require('miniprogram-computed').behavior
// 导入滑块删除
import { swipeCellBehavior } from '@/behaviors/swiperCell'
ComponentWithStore({
  behaviors: [computedBehavior, swipeCellBehavior],
  storeBindings: {
    store: userStore,
    fields: ['token']
  },
  computed: {
    // 全选或者全不选
    isAllSelect(data) {
      // 用短路运算符 左边要是不满足 就是 false
      return (
        data.cartList.length !== 0 && data.cartList.every((item) => item.isChecked === 1)
      )
    },
    // 计算总金额
    totalPrice(data) {
      return data.cartList.reduce((accumulator, obj) => {
        if (obj.isChecked === 1) {
          return accumulator + obj.price * obj.count
        }
        return accumulator
      }, 0)
    }
  },
  // 组件的属性列表
  properties: {},

  // 组件的初始数据
  data: {
    cartList: [],
    emptyDes: '还没有添加商品，快去添加吧～'
  },

  // 组件的方法列表
  methods: {
    // 跳转到订单结算页面
    toOrder() {
      // 判断用户有没有选择商品
      if (this.data.totalPrice === 0) {
        wx.toast({
          title: '请选择需要购买的商品'
        })
        return
      }
      wx.navigateTo({
        url: '/modules/orderPayModule/pages/order/detail/detail'
      })
    },
    onHide() {
      this.onSwipeCellCommonClick()
    },
    // 删除购物车
    async delCartGoods(event) {
      const { id } = event.currentTarget.dataset
      const modalRes = await wx.modal({
        content: '您确认删除该商品吗 ?'
      })
      if (modalRes) {
        await reqDelCart(id)
        this.showTipGetList()
      }
    },
    // 修改数量
    changeByNum: debounce(async function (event) {
      const { id: goodsId, index, oldNum } = event.currentTarget.dataset
      const blessing = this.data.cartList[index].blessing
      const newNum = event.detail > 200 ? 200 : event.detail
      const reg = /^([1-9]|[1-9]\d|1\d{2}|200)$/
      // 对用户输入的值进行验证
      const regRes = reg.test(newNum)
      // 如果验证没有通过，需要重置为之前的购买数量
      if (!regRes) {
        this.setData({
          [`cartList[${index}].count`]: oldNum
        })
        return
      }
      // 如果通过，需要计算差值，然后将差值发送给服务器，让服务器进行逻辑处理
      const disCount = newNum - oldNum

      // 如果购买数量没有发生改变，不发送请求
      if (disCount === 0) return

      // 发送请求：购买的数量 和 差值
      const res = await reqAddCart({ goodsId, count: disCount, blessing })

      // 服务器更新购买数量成功以后，更新本地的数据
      if (res.code === 200) {
        this.setData({
          [`cartList[${index}].count`]: newNum
        })
      }
    }, 500),
    // 全选或者全部选
    async allSelect(event) {
      const { detail } = event
      const isChecked = detail ? 1 : 0
      const res = await reqCheckAllCart(isChecked)
      if (res.code === 200) {
        this.showTipGetList()
      }
    },
    // 更新购买状态
    async updateChecked(event) {
      // const { id: goodsId, index } = event.currentTarget.dataset
      // const isChecked = this.data.cartList[index].isChecked === 1 ? 0 : 1
      // reqUpdateChecked(goodsId, isChecked).then(() => {
      //   this.showTipGetList()
      // })
      // 获取最新的选中状态
      const { detail } = event
      // 获取商品的索引和 id
      const { id, index } = event.currentTarget.dataset
      // 将最新的状态格式化成后端所需要的数据格式
      const isChecked = detail ? 1 : 0
      // 调用接口，传入参数，更新商品的状态
      const res = await reqUpdateChecked(id, isChecked)

      // 如果数据更新成功，需要将本地的数据一同改变
      if (res.code === 200) {
        this.setData({
          [`cartList[${index}].isChecked`]: isChecked
        })
      }
    },
    onShow() {
      this.showTipGetList()
    },
    async showTipGetList() {
      // 将 token 进行解构
      const { token } = this.data

      // 1. 如果没有登录，购物车列表，展示文案：您尚未登录，点击登录获取更多权益
      if (!token) {
        this.setData({
          emptyDes: '您尚未登录，点击登录获取更多权益',
          cartList: []
        })
        return
      }
      // 获取商品列表数据
      const { data: cartList, code } = await reqCartList()
      if (code === 200) {
        // 2. 如果用户登录，购物车列表为空，展示文案： 还没有添加商品，快去添加吧～
        this.setData({
          cartList,
          emptyDes: cartList.length === 0 && '还没有添加商品，快去添加吧～'
        })
      }
    }
  }
})
